<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>智能车机后台配置界面</title>
  <style>
    html,
    body {
      margin: 0;
      padding: 0;
      height: 100%;
      width: 100%;
    }

    body {
      font-family: Arial, sans-serif;
      background-color: #f5f5f5;
    }

    .container {
      display: flex;
      height: 100%;
    }

    .sidebar {
      width: 20%;
      background-color: #222;
      color: #fff;
      padding: 20px;
    }

    .sidebar ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    .sidebar li {
      padding: 10px 0;
      border-bottom: 1px solid #444;
    }

    .sidebar a {
      color: #fff;
      text-decoration: none;
    }

    .content {
      width: 80%;
      background-color: #fff;
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .button {
      background-color: #007bff;
      color: #fff;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    .highlight {
      color: #ff5733;
    }

    /* 车辆状态 3x3 区域样式 */
    .vehicle-status-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
      padding: 20px;
    }

    .grid-item {
      border: 1px solid #000;
      background-color: #f9f9f9;
      padding: 10px;
    }

    /* 空调温度滑块样式 */
    .temperature-slider {
      -webkit-appearance: none;
      width: 100%;
      height: 20px;
      background: linear-gradient(to right, #007bff, #ff5733);
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity.2s;
    }

    .temperature-slider:hover {
      opacity: 1;
    }

    .temperature-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      background: #222;
      cursor: pointer;
    }

    .temperature-slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      background: #222;
      cursor: pointer;
    }

    /* 风速控制滑块样式 */
    .wind-slider {
      -webkit-appearance: none;
      width: 100%;
      height: 20px;
      background: linear-gradient(to right, #f9f9f9, #ff5733);
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity.2s;
    }

    .wind-slider:hover {
      opacity: 1;
    }

    .wind-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      background: #222;
      cursor: pointer;
    }

    .wind-slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      background: #222;
      cursor: pointer;
    }

    /* 温湿度显示框样式 */
    .temperature-value-box {
      border: 1px solid #000;
      background-color: #fff;
      padding: 5px;
    }

    .humidity-value-box {
      border: 1px solid #000;
      background-color: #fff;
      padding: 5px;
    }

    /* 寻车按钮样式 */
    .find-car-button {
      background-color: #222;
      color: #fff;
      padding: 15px 30px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.1s ease;
    }

    .find-car-button:active {
      background-color: #444;
      transform: scale(0.95);
    }

    /* 车门控制按钮样式 */
    .door-control-button {
      background-color: #222;
      color: #fff;
      padding: 15px 30px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.1s ease;
    }

    .door-control-button:active {
      background-color: #444;
      transform: scale(0.95);
    }

    /* 温湿度刷新按钮样式 */
    .refresh-button {
      background-color: #222;
      color: #fff;
      padding: 10px 15px;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.1s ease;
    }

    .refresh-button:active {
      background-color: #444;
      transform: scale(0.95);
    }

    /* 雨刷器控制按钮样式 */
    .wiper-control-button {
      background-color: #222;
      color: #fff;
      padding: 15px 30px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.1s ease;
    }

    .wiper-control-button:active {
      background-color: #444;
      transform: scale(0.95);
    }

    /* 天窗控制按钮样式 */
    .sunroof-control-button {
      background-color: #222;
      color: #fff;
      padding: 15px 30px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.1s ease;
    }

    .sunroof-control-button:active {
      background-color: #444;
      transform: scale(0.95);
    }

    /* 远近光灯控制按钮样式 */
    .light-control-button {
      background-color: #222;
      color: #fff;
      padding: 15px 30px;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.1s ease;
    }

    .light-control-button:active {
      background-color: #444;
      transform: scale(0.95);
    }

    /* 电量显示模块样式 */
    .battery-display {
      border: 1px solid #000;
      background-color: #fff;
      padding: 5px;
    }

    .battery-refresh-button {
      background-color: #222;
      color: #fff;
      padding: 10px 15px;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      cursor: pointer;
      transition: background-color 0.3s ease, transform 0.1s ease;
    }

    .battery-refresh-button:active {
      background-color: #444;
      transform: scale(0.95);
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="sidebar">
      <ul>
        <li><a href="#" onclick="showHome()">主页</a></li>
        <li><a href="#" onclick="showVehicleStatus()">车辆状态</a></li>
        <li><a href="#" onclick="showNavigation()">导航设置</a></li>
        <li><a href="#" onclick="showAudioControl()">音频控制</a></li>
        <li><a href="#" onclick="showSystemSettings()">系统设置</a></li>
      </ul>
    </div>
    <div class="content" id="contentDiv">
      <!-- 这里将根据左侧菜单的点击动态显示不同的内容 -->
      <h1>欢迎来到智能车机后台配置界面</h1>
      <p>在这里，你可以轻松管理和配置你的智能车机系统，让驾驶体验更加便捷和舒适。</p>
    </div>
  </div>

  <script>
    function showHome() {
      document.getElementById('contentDiv').innerHTML = `<h1>欢迎来到智能车机后台配置界面</h1><p>在这里，你可以轻松管理和配置你的智能车机系统，让驾驶体验更加便捷和舒适。</p>`;
    }

    function showVehicleStatus() {
      // 车辆状态页面内容
      let content = `<div class="vehicle-status-grid">
                                <div class="grid-item" style="grid-column: 1 / span 1; grid-row: 1 / span 1;">
                                    <h3>空调温度控制</h3>
                                    <p>通过滑动滑块调节空调温度</p>
                                    <input type="range" class="temperature-slider" min="16" max="40" value="25" oninput="updateTemperature(this.value)">
                                    <span id="temperature-display">25°C</span>
                                </div>
                                <div class="grid-item" style="grid-column: 2 / span 1; grid-row: 1 / span 1;">
                                    <h3>风速控制</h3>
                                    <p>通过滑动滑块调节风速</p>
                                    <input type="range" class="wind-slider" min="0" max="3" step="1" value="0" oninput="updateWindSpeed(this.value)">
                                    <span id="wind-speed-display">0（关闭）</span>
                                </div>
                                <div class="grid-item" style="grid-column: 3 / span 1; grid-row: 1 / span 1;">
                                    <h3>温湿度检测</h3>
                                    <p>温度：<span class="temperature-value-box" id="temperature-value"></span>℃</p>
                                    <p>湿度：<span class="humidity-value-box" id="humidity-value"></span>%</p>
                                    <button class="refresh-button" onclick="refreshTemperatureHumidity()">刷新</button>
                                </div>
                                <div class="grid-item" style="grid-column: 1 / span 1; grid-row: 2 / span 1;">
                                    <h3>寻车功能</h3>
                                    <p>点击按钮发送寻车命令</p>
                                    <button class="find-car-button" onclick="sendFindCarCommand()">寻车</button>
                                </div>
                                <div class="grid-item" style="grid-column: 2 / span 1; grid-row: 2 / span 1;">
                                    <h3>车门控制</h3>
                                    <p id="door-status">当前车门状态：关闭</p>
                                    <button class="door-control-button" onclick="toggleDoor()">切换车门状态</button>
                                </div>
                                <div class="grid-item" style="grid-column: 3 / span 1; grid-row: 2 / span 1;">
                                    <h3>雨刷器控制</h3>
                                    <p id="wiper-status">当前雨刷器状态：关闭</p>
                                    <button class="wiper-control-button" onclick="toggleWiper()">切换雨刷器状态</button>
                                </div>
                                <div class="grid-item" style="grid-column: 1 / span 1; grid-row: 3 / span 1;">
                                    <h3>天窗控制</h3>
                                    <p id="sunroof-status">当前天窗状态：关闭</p>
                                    <button class="sunroof-control-button" onclick="toggleSunroof()">切换天窗状态</button>
                                </div>
                                <div class="grid-item" style="grid-column: 2 / span 1; grid-row: 3 / span 1;">
                                    <h3>远近光灯控制</h3>
                                    <p id="light-status">当前灯光状态：关闭</p>
                                    <button class="light-control-button" onclick="toggleLight()">切换灯光状态</button>
                                </div>
                                <div class="grid-item" style="grid-column: 3 / span 1; grid-row: 3 / span 1;">
                                    <h3>电量显示</h3>
                                    <p>电量：<span class="battery-display" id="battery-value">80%</span></p>
                                    <button class="battery-refresh-button" onclick="refreshBattery()">刷新</button>
                                </div>
                            </div>`;
      document.getElementById('contentDiv').innerHTML = content;
    }

    function showNavigation() {
      document.getElementById('contentDiv').innerHTML = `<iframe src="https://www.amap.com/" style="width:100%; height:100%;"></iframe>`;
    }

    function showAudioControl() {
      document.getElementById('contentDiv').innerHTML = `<h2>音频控制界面</h2><p>在这里可以调整音频设置。</p>`;
    }

    function showSystemSettings() {
      document.getElementById('contentDiv').innerHTML = `<h2>系统设置界面</h2><p>进行系统相关的配置。</p>`;
    }

    function updateTemperature(value) {
      document.getElementById('temperature-display').innerText = value + '°C';
    }

    function updateWindSpeed(value) {
      let displayText;
      switch (value) {
        case '0':
          displayText = '0（关闭）';
          break;
        case '1':
          displayText = '1（风速一档）';
          break;
        case '2':
          displayText = '2（风速二档）';
          break;
        case '3':
          displayText = '3（风速三档）';
          break;
      }
      document.getElementById('wind-speed-display').innerText = displayText;
    }

    function sendFindCarCommand() {
      // 模拟发送寻车命令后的弹窗提示
      alert('寻车命令已发送！');
    }

    function toggleDoor() {
      let doorStatusElement = document.getElementById('door-status');
      if (doorStatusElement.innerText === '当前车门状态：关闭') {
        doorStatusElement.innerText = '当前车门状态：开启';
        alert('车门已开启！');
      } else {
        doorStatusElement.innerText = '当前车门状态：关闭';
        alert('车门已关闭！');
      }
    }

    function refreshTemperatureHumidity() {
      // 这里可以模拟刷新温湿度数据的逻辑
      document.getElementById('temperature-value').innerText = '模拟温度数据';
      document.getElementById('humidity-value').innerText = '模拟湿度数据';
    }

    function toggleWiper() {
      let wiperStatusElement = document.getElementById('wiper-status');
      if (wiperStatusElement.innerText === '当前雨刷器状态：关闭') {
        wiperStatusElement.innerText = '当前雨刷器状态：开启';
      } else {
        wiperStatusElement.innerText = '当前雨刷器状态：关闭';
      }
    }

    function toggleSunroof() {
      let sunroofStatusElement = document.getElementById('sunroof-status');
      if (sunroofStatusElement.innerText === '当前天窗状态：关闭') {
        sunroofStatusElement.innerText = '当前天窗状态：开启';
      } else {
        sunroofStatusElement.innerText = '当前天窗状态：关闭';
      }
    }

    function toggleLight() {
      let lightStatusElement = document.getElementById('light-status');
      let currentStatus = lightStatusElement.innerText;
      if (currentStatus === '当前灯光状态：关闭') {
        lightStatusElement.innerText = '当前灯光状态：近光灯';
      } else if (currentStatus === '当前灯光状态：近光灯') {
        lightStatusElement.innerText = '当前灯光状态：远光灯';
      } else {
        lightStatusElement.innerText = '当前灯光状态：关闭';
      }
    }

    function refreshBattery() {
      // 这里可以模拟获取新电量值的逻辑，这里简单随机生成一个电量值示例（0 - 100）
      let newBatteryValue = Math.floor(Math.random() * 101) + '%';
      document.getElementById('battery-value').innerText = newBatteryValue;
    }
  </script>
</body>

</html>